<template>
  <div id="cesiumContainer"></div>
  <div id="showBtn">
    <button @click="changeEntityShow">显示管线</button>
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
import * as turf from '@turf/projection'
import coordtransform from 'coordtransform'
import { onMounted  } from 'vue';
import geojson from '../public/geojson/LineString_pipe.json?url'
let viewer = null;


// const computeCircle = (radius) => {
//   const positions = [];
//   for (let i = 0; i < 360; i++) {
//       const radians = Cesium.Math.toRadians(i);
//       positions.push(
//       new Cesium.Cartesian2(
//           radius * Math.cos(radians),
//           radius * Math.sin(radians)
//       )
//       );
//   }
//   return positions;
// };

const download = (filename, text) => {
  let pom = document.createElement( 'a');
  pom.setAttribute('href','data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  pom.setAttribute('download',filename);
  if (document.createEvent) {
    var event = document .createEvent( 'MouseEvents');
    event.initEvent('click',true,true);
    pom.dispatchEvent(event);
  }else{
    pom.click();
  } 
}
const initMap = async () => {
  
  viewer = new Cesium.Viewer("cesiumContainer",{
    infoBox:false
  });

  
/** 1. 数据准备 */
// 雷达的高度
var length = 400000.0;
// 地面位置(垂直地面)
var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.39, 39.9);
// 中心位置
var centerOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.39, 39.9, length*0.5);
// 顶部位置(卫星位置)
var topOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.39, 39.9,length);
// 矩阵计算
var modelMatrix = Cesium.Matrix4.multiplyByTranslation( // 转换矩阵
  Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid), // 矩阵
  new Cesium.Cartesian3(0.0, 0.0, length * 0.5), // 要转换的笛卡尔坐标 
  new Cesium.Matrix4() // 返回新的矩阵
 );

/** 2. Geometry: 创建一个圆锥几何图形，就是雷达模拟 */
//1. 构造 geometry
var cylinderGeometry = new Cesium.CylinderGeometry({
  length: length,//圆柱体高度
  topRadius: 0.0,//定点半径
  bottomRadius: length * 0.5,//底部半径
  vertexFormat: Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat //要计算的顶点属性
});
//2. 创建 GeometryInstance
var redCone = new Cesium.GeometryInstance({
  geometry: cylinderGeometry, //geomtry类型
  modelMatrix: modelMatrix, //模型矩阵 调整矩阵的位置和方向
});

/** 3. shader着色器: 定义glsl代码 */
const source =
/**传入的动态数值,uniform是变量，uniform是CPU往GPU传值的重要途径，
因为GPU渲染屏幕中每个像素的过程都是互相并行并且互不干扰的，所以传到shader里面的uniform变量的值都是常量，只读且不能被shader程序修改
**/
`uniform vec4 color; 
 uniform float repeat; 
 uniform float offset; 
 uniform float thickness;

//设置图形外观材质
czm_material czm_getMaterial(czm_materialInput materialInput){
    czm_material material = czm_getDefaultMaterial(materialInput); //获取内置的默认材质
    float sp = 1.0/repeat; //重复贴图
    vec2 st = materialInput.st; //二维纹理坐标
    float dis = distance(st, vec2(0.5)); //计算距离
    float m = mod(dis + offset, sp); //间隔
    float a = step(sp*(1.0-thickness), m);//线条拼色 
	//修改材质
    material.diffuse = color.rgb;
    material.alpha = a * color.a;
	return material;
}`

/** 4. appearance */
//1. 自定义material外观材质，修改着色器
const material = new Cesium.Material({
	fabric: {
		type: 'VtxfShader1',//这是自定义的类型？？？
		uniforms: { //动态传递参数
			color: new Cesium.Color(1, 0, 0.0, 1.0),//
			repeat: 30.0,//间隔
			offset: 10.0,
			thickness: 0.3,
		},
		source:source // 用于生成材质的forbicjson
  },
  translucent: false //代表材质不透明，为true代表材质透明
})
//2. 定义appearance外观
const appearance = new Cesium.MaterialAppearance({
	material:material, // 自定义的材质
	faceForward: false, // 当绘制的三角面片法向不能朝向视点时，自动翻转法向，从而避免法向计算后发黑等问题
	closed: true // 是否为封闭体，实际上执行的是是否进行背面裁剪
})

/** 5. 创建 Primitive */
//1. 添加 Primitive
var radar = viewer.scene.primitives.add(
  new Cesium.Primitive({
		geometryInstances: [redCone],
		appearance: appearance
	})
);
//2. 动态修改雷达材质中的 offset 变量，从而实现动态效果。
/**
 *scene.preUpdate : 获取在场景更新或呈现之前将引发的事件。事件的订阅者接收场景实例作为第一个参数，当前时间作为第二个参数。
 */
viewer.scene.preUpdate.addEventListener(function() {
	let { offset } = radar.appearance.material.uniforms;
  offset -= 0.001;
	if (offset > 1.0) {
		offset = 0.0;
	}
	radar.appearance.material.uniforms.offset = offset;
})

viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(109.95, 24.45, 1800000),
  orientation: new Cesium.HeadingPitchRoll(0.6, -0.8, 0.0)
})
}

onMounted( () => {
  initMap();
  console.log(turf)

  
})
</script>
<style scoped lang="scss">
#app{
  width:100vw;
  /* height: 100vh; */
}
#cecsium{
  width: 100vw;
  height: 200vh;
}
</style>
